<!--
  @author yangjiangming
  @date 2018-12-10 20:40:28
-->
<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
<html th:replace="~{work/modify/common/layout :: layout('退款凭证', ~{::title}, ~{::content}, ~{::script})}">
<head>
    <title>工单管理-退款凭证</title>
</head>
<body>

<div th:fragment="content">
    <style>
        label.red_star:before {
            content: '* ';
            color: red;
        }
        .refund-voucher-table td{
            padding: 5px 40px !important;
        }
    </style>
    <div class="layui-row">
        <table class="layui-table table-info refund-voucher-table" lay-skin="nob" lay-size="lg">
            <tbody>
            <tr>
                <th><h3><b>基本信息：</b></h3></th>
            </tr>
            <tr>
                <td th:text="'退款金额：' + ${#moneyUtil.parseToYuanStartWithUnit(refundOrderWorkPayVO.amount)}"></td>
            </tr>
            <tr>
                <td th:text="'退款方式 / 路径：人工退款 / '+ ${refundOrderWorkPayVO.payTargetChanneName}"></td>
            </tr>
            <tr>
                <td>
                    <block th:switch="${refundOrderWorkPayVO.payTargetChannelId}">
                        <block th:case="1" th:text="'退款人姓名：'+${refundOrderWorkPayVO.payeeThirdAccountName}"></block>
                        <block th:case="2" th:text="'退款人姓名：'+${refundOrderWorkPayVO.payeeThirdAccountName}"></block>
                        <block th:case="5" th:text="'转账银行：'+${refundOrderWorkPayVO.payeeThirdAccountBank}"></block>
                    </block>
                </td>
            </tr>
            <tr>
                <td>
                    <block th:switch="${refundOrderWorkPayVO.payTargetChannelId}">
                        <block th:case="1" th:text="'支付宝账号：'+${refundOrderWorkPayVO.payeeThirdAccount}"></block>
                        <block th:case="2" th:text="'微信ID：'+${refundOrderWorkPayVO.payeeThirdAccount}"></block>
                        <block th:case="5" th:text="'转账账号：'+${refundOrderWorkPayVO.payeeThirdAccount}"></block>
                    </block>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
    <form class="layui-form">
        <input type="text" name="workId" th:value="${workId}" hidden>
        <input type="text" name="orderId" th:value="${orderId}" hidden>
        <input type="text" id="orderPayId" name="orderPayId" th:value="${refundOrderWorkPayVO.orderPayId}" hidden>
        <input type="text" id="payerThirdAccountBank" name="payerThirdAccountBank" th:value="${refundOrderWorkPayVO.payerThirdAccountBank}" hidden>
        <input type="text" id="payerThirdAccount" name="payerThirdAccount" th:value="${refundOrderWorkPayVO.payerThirdAccount}" hidden>

        <!-- 图片 -->
        <div class="layui-form-item">
            <div class="layui-card-header" style="margin-top:10px;"><h3><b style="padding: 15px;color: rgb(102, 102, 102)">退款凭证：</b></h3></div>
            <div class="layui-split">&nbsp;</div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="width: 60px"></label>
                <div class="layui-input-block layui-col-space10">
                    <div class="layui-col-md3" th:each="item,ind : ${new int[2]}">
                        <block th:if="${ind.index!=1}">
                            <div class="layui-inline">
                                <div class="layui-upload-drag" th:id="|imageSrcUrl${ind.index}|" style="position: relative;">
                                    <div>
                                        <input type="hidden" class="img-url" th:id="|imageSrcUrl${ind.index}Value|">
                                        <i class="layui-icon"></i>
                                        <p>点击选择图片上传</p>
                                        <img th:id="|imageSrcUrl${ind.index}Values|">
                                    </div>
                                </div><input class="layui-upload-file" type="file" accept="image/*" name="file">
                            </div>
                            <div class="layui-inline" style="text-align: center;display: block;margin-left: -80px;">
                                <i class="layui-icon layui-icon-search btn-review"></i>
                                <i class="layui-icon layui-icon-delete btn-delete" th:data-index="${ind.index}"></i>
                            </div>
                            <div class="layui-inline" style="text-align: center;/* display: block; */margin-left: -110px;">
                                <div class="layui-form-item">
                                    <label class="layui-form-label red_star">凭证号：</label>
                                    <div class="layui-input-block">
                                        <input th:id="|refund_no_input${ind.index}|" style="width: 255px" type="text" name="title" lay-verify="" placeholder="请输入退款流水" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                            </div>
                            <div class="layui-inline" style="margin-left: -110px;">
                                <div class="layui-form-item">
                                    <label class="layui-form-label red_star">打款银行：</label>
                                    <div class="layui-input-block" style="width: 250px;">
                                        <select id="remitBank" class="remitbank-select" lay-verify="required" lay-filter="remitBankChange" lay-search>
                                            <option value="" th:selected="${#strings.isEmpty(refundOrderWorkPayVO.payerThirdAccount)}">--请选择--</option>
                                            <option th:each="refundBankVo : ${refundBankVoList}"
                                                    th:value="${refundBankVo.account}"
                                                    th:text="${refundBankVo.name}"
                                                    th:data-account="${refundBankVo.account}"
                                                    th:data-bank="${refundBankVo.accountBank}"
                                                    th:selected="${refundOrderWorkPayVO.payerThirdAccount == refundBankVo.account}"
                                            >
                                            </option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-inline" style="text-align: center;/* display: block; */margin-left: -110px;">
                                <div class="layui-form-item">
                                    <label class="layui-form-label red_star">手续费：</label>
                                    <div class="layui-input-block">
                                        <input type="number" name="refundPoundage"
                                               lay-verify="amount"
                                               placeholder="请输入退款手续费"
                                               th:value="${#moneyUtil.parseToYuanStr(refundOrderWorkPayVO.refundPoundage)}"
                                               autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                            </div>
                            <div class="layui-inline"  style="text-align: center;/* display: block; */margin-left: -110px;width: 800px;">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">备注：</label>
                                    <textarea class="layui-textarea"
                                              style="width: 500px"
                                              name="refundVoucherRemark"
                                              placeholder="请输入备注,小于200字"
                                              maxlength="200"
                                              th:text="${refundOrderWorkPayVO.refundVoucherRemark}">
                                </textarea>
                                </div>
                            </div>
                        </block>
                        <block th:unless="${ind.index!=1}">
                            <div class="layui-inline">
                                <div style="padding: 20px 0px 40px 0px">
                                    <span style="font-size: 12px;color: rgb(255,0,0)">单张图片大小5M以内，支持jpg、jpeg、png格式图片上传</span>
                                </div>
                            </div>
                        </block>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item" style="text-align: center;">
            <button class="layui-btn " lay-submit>保存</button>
            <button class="layui-btn layui-btn-primary" onclick="parent.layer.closeAll();">取消</button>
        </div>
    </form>
</div>

<script th:inline="javascript">

    var refundVO = [[${refundOrderWorkPayVO}]];
    var moduleId = [[${moduleId}]];

    var layuiModel = {
        oms_work_modify_refund_voucher: "work/modify/zmn.oms.work.modify.refund.voucher"
    };
</script>
</body>
</html>